<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <my-button>default</my-button>
    <div class="marigin"></div>
    <my-button type="default">default</my-button>
    <div class="marigin"></div>
    <my-button type="primary">primary</my-button>
    <div class="marigin"></div>
    <my-button type="warning">warning</my-button>
    <div class="marigin"></div>
    <my-button type="success">success</my-button>
</div>
</body>
<style>
    .marigin{
        margin-top: 10px;
    }
    .button{
        width: 100%;
        height: 34px;
        line-height: 32px;
        outline: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        cursor: pointer;

    }
    .button-default {
        background-color: #ffffff;
        color: #333333;
        border: 1px solid #ccc;
    }
    .button-primary {
        background-color: #39f;
        color: #ffffff;
        border: 1px solid #39f;
    }
    .button-warning {
        background-color: #f90;
        color: #ffffff;
        border: 1px solid #f90;
    }
    .button-success {
        background-color: #0c6;
        color: #ffffff;
        border: 1px solid #0c6;
    }
</style>
<script src="../../js/vue.js"></script>
<script type="text/javascript">
    // 定义 MyPlugin
    const MyPlugin = {}
    MyPlugin.install = function(Vue, options) {
        Vue.component('MyButton',{
            template: '<button :class="btnClass"><slot/></button>',
            props: {
                type: {
                    type: String,
                    default: 'default'
                }
            },
            computed: {
                btnClass() {
                    return ["button",`button-${this.type}`]
                }
            }
        })
    }
    // 使用插件 MyPlugin
    Vue.use(MyPlugin)

    var vm = new Vue({
        el: '#app',
        data() {
            return {}
        }
    })
</script>
</html>
